<template>
  <div class="box">
    <div class="card">
      <div class="avatar">
        <img src="/img/cp/comment01.jpg" alt="">
      </div>
      <div class="info">
        <div>
          <div class="user">
            <div>
              <span>{{ props.items.user_name }}</span> 
              <div class="vip">
                <i class="iconfont icon-vip5"></i>
              </div> 
            </div>
            <div>
              发布时间：{{ moment(props.items.content_time).format("YYYY-MM-DD HH:mm:ss") }}
            </div>
          </div>
          <div class="details" >
            <a class="van-multi-ellipsis--l3"  :href="`/home/LiveClassSon/${props.items.content_id}`">{{ props.items.content_text }}</a>
            <div class="pic-box" >
              <div class="pic-item"
                v-for="(item,i) in urls"
                :key="i">            
                <van-image
                  class="pic"   
                  @click.native="previewImage(i)"
                  :src="item" fit="cover" radius="6">
                </van-image>
              </div>
              
            </div>
            <div class="event">
              <span>科目四3小时精华课 | 在线讲解</span>
              <van-icon name="arrow" color="#B28F2F" size="20"/>
            </div>
            <div class="foot">
              <div>
                <van-button round color="#F5F5F5" size="mini"  style="color:#777; font-weight: 600; margin-right: 3px;">&nbsp;# 科目一&nbsp;</van-button>
                <van-button round color="#F5F5F5" size="mini" style="color:#777; font-weight: 600;">&nbsp;# 科目三&nbsp;</van-button>
              </div>
              <div>
                <div >
                  <van-icon name="good-job-o" size="24" @click="onClick" :color="[showCode ? 'black' : 'red']"/>
                  <span class="num-1">131</span> 
                </div>
                <!--   -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive,onMounted } from 'vue'
import { showImagePreview } from 'vant'
import { useRouter } from 'vue-router';
import 'vant/es/image-preview/style'
import moment from 'moment';
import httpApi from '@/http';
const router = useRouter()

const props = defineProps({
  items: {
    content_cover:Array,
    content_id: Number,
    content_text: String,
    content_time: String,
    content_type: String,
    user_name:String,
  },
});
const urls= reactive([])
if(props.items.content_cover){
  urls.push(...(props.items.content_cover).split(';')) 
  console.log(urls,'66565')
}
console.log(props.items.content_cover,'87878')

// const srcs = reactive(
//   urls.filter((value, index)=>{
//     return index<3
//   })
// )
// const more = ref(
//   urls.length 
// )
  
const previewImage = function(index) {
    
  showImagePreview({images:urls, startPosition:index})
}

const showCode  = ref(true)
const onClick = function(){
  showCode.value  = !showCode.value 
  // this.color = !this.color
}

// let labelArray=reactive([])


// labelArray=(props.items.content_cover).split(';')
// const batason = ref([]);
// onMounted(()=>{
//   const kemu = ref(0)
//  if(props.items.content_id=='科目一'){
//   kemu = 1
//  }else if(props.items.content_id=='科目二'){
//   kemu = 2
//  }else if(props.items.content_id=='科目三'){
//   kemu = 3
//  }else if(props.items.content_id=='科目四'){
//   kemu = 4
//  }
//  console.log(props.items.content_id,'8888')
//   httpApi.liveApi.queryByReplylist({ reply_fid: kemu }).then((res) => {
//         console.log("加载详情：", res);
//         console.log(kemu)
//         batason.value = res.data.data.result
//         console.log(batason.value.length, 'sss')

//       });
// })
 
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  padding: 0 15px;

  .card {
    padding: 15px 0;
    border-bottom: 1px solid #F0F0F0;
    display: flex;
    // justify-content: space-between;

    .avatar {
      padding-right: 10px;

      >img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }
    }
    
    .info {
      .user {
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-bottom: 10px;

        >div:nth-child(1) {
          display: flex;
          align-items: center;
          >span {
            font-size: 15px;
            font-weight: bold;
            margin-right: 3px;
          }
          .vip {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 14px;
            height: 14px;
            border-radius: 3px;
            background-color: #42BAFC;

            >i {
              font-size: 16px;
              color: #fff;
              text-shadow: 0.5px 0.5px rgba(0, 0, 0,.5);
              display: inline-block;
            }
          }
        }

        >div:nth-child(2) {
          font-size: 12px;
          color: #909090;
        }
      }

      .details {
        >a {
          line-height: 25px;
          margin-bottom: 8px;
        }

        >.pic-box {
          display: flex;
          justify-content: space-between;
          position: relative;
          margin-bottom: 15px;
          
          >.pic-item {
            width: calc((100% - 10px) / 2);
            height: 100px;
            >.pic {
              width: 100%;
              height: 100%;
              border-radius: 6px;
              object-fit: cover;
            }
          }
          >span {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 32px;
            height: 32px;
            background-color: rgba(0, 0, 0, .5);
            color: #f9f8f7;
            font-size: 15px;
            font-weight: 400;
            border-end-end-radius: 6px;
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }
        >.event {
          height: 32px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #FFF5E9;
          border-radius: 3px;
          color: #7D6C55;
          font-size: 14px;
          font-weight: bold;
          padding: 0 10px;
          margin-bottom: 15px;
        }
        .foot {
          display: flex;
          justify-content: space-between;

          >div:last-child {
            display: flex;

            >div:last-child {
              margin-left: 20px;
              position: relative;
              top: 2px;          
            }

            span {
              font-size: 14px;
              position: relative;
              margin-left: 4px;
            }
            .num-1 {
              top: -3px;
            }
            .num-2 {
              top: -5px;
            }
          }
        }
      }
    }
  }
}

</style>